<template>
	<view>
		<view class="page">

			<u-form :model="form" ref="uForm" label-width="150" :border-bottom="false">
				<view style="padding: 20rpx; width: 700rpx;margin:40rpx auto;background: #fff;border-radius: 20rpx;">
					<u-form-item label="地址" prop="address" @click="openMap">
						<u-input placeholder="请选择地址" v-model="form.address" disabled type="select" @click="openMap" />
					</u-form-item>
					<u-form-item label="详细地址">
						<u-input placeholder="请输入详细地址" v-model="form.detailAddress" />
					</u-form-item>

					<u-form-item label="姓名" prop="contact_name">
						<u-input placeholder="请输入姓名" v-model="form.contact_name" />
					</u-form-item>


					<u-form-item label="手机号" prop="contact_phone">
						<u-input placeholder="请输入手机号" v-model="form.contact_phone" />
					</u-form-item>


					<u-form-item label="备注">
						<u-input type="textarea" placeholder="请输入备注" v-model="form.remarks" />
					</u-form-item>
				</view>


				<view style="padding: 20rpx; width: 700rpx;margin:40rpx auto;background: #fff;border-radius: 20rpx;">
					<view class="u-flex u-border-bottom u-padding-bottom-20">
						<view>
							<u-image :src="info.images[0]" width="158" height="128"></u-image>
						</view>

						<view class="u-flex-1 u-margin-left-20">
							<view style="font-size: 32rpx;font-weight: bold;">{{info.name}}</view>
							<view style="color: #00C08D;margin: 10rpx 0;">￥{{info.price}}/{{info.service_duration}}分钟
							</view>
							<view style="color: #666;">技师：{{info.technician[0].nickname}}</view>
						</view>
					</view>

					<u-cell-group>
						<u-cell-item title="技师" :arrow="false">
							<view slot="right-icon">
								<view v-if="index==0" v-for="(item,index) in info.technician" :key="index">
									<view class="u-flex">
										<view style="color: #00C08D;margin-right: 20rpx;">{{item.nickname}}</view>
										<view>
											<u-image :src="item.avatar" width="60" height="60" shape="circle"></u-image>
										</view>
									</view>
								</view>
							</view>
						</u-cell-item>
						<u-form-item label="服务时间" @click="openTime" prop="appointment_start_time">
							<u-input inputAlign="right" placeholder="请选择服务时间" v-model="form.appointment_start_time"
								disabled type="select" @click="openTime" />
						</u-form-item>


						<u-form-item label="车费" v-if="form.lat && form.lng">
							<u-input inputAlign="right" placeholder="请选择地址" v-model="form.fare" disabled />
						</u-form-item>


						<u-cell-item @click="useCoupon" title="优惠券" :value="coupondMoney?'-￥'+ coupondMoney:'使用优惠券'">
						</u-cell-item>
					</u-cell-group>

				</view>
			</u-form>
		</view>

		<u-popup v-model="timeShow" mode="bottom" border-radius="20">
			<wr-time @selectTime="selectTime" v-if="timeShow" :info="timeInfo"></wr-time>
		</u-popup>


		<view class="bottomBtn">
			<view class="u-margin-left-30">
		      <text>待支付：<text style="color:#00C08D ;">￥{{Number(form.need_price)+Number(form.fare) }}</text></text>		
			</view>
			<view @click="pay" class="" style="color: #fff; background: #00C08D;text-align: center;width: 200rpx;">
				去支付
			</view>
		</view>
		
		<u-popup v-model="CouponShow" mode="bottom" border-radius="20">
			<wr-coupon @tap="Coupon(item) " :item="item" v-if="couponList.length" v-for="(item,index) in couponList" status="1"></wr-coupon>
		</u-popup>
		



	</view>



</template>

<script>
	import wxpay from '@/common/wxpay.js';
	export default {
		data() {
			return {
				couponList:[],
				coupondMoney:'',
				timeInfo: '',
				timeShow: false,
				CouponShow:false,
				form: {
					address: '',
					detailAddress: '',
					contact_name: '',
					contact_phone: "",
					remarks: '',
					appointment_start_time: '',
					lat: "",
					lng: "",
					fare: '',
					coupon_id: '',
					need_price: '',
				},
				rules: {

					address: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					contact_name: [{
						required: true,
						message: '请输入联系人',
						trigger: 'change'
					}],
					appointment_start_time: [{
						required: true,
						message: '请选择预约时间',
						trigger: 'change'
					}],
					contact_phone: [{
						max: 11,
						message: '手机号码不正确',
						trigger: 'change'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]


				},
				id: '',
				tid: '',
				info: {

				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
			}
			if (options.tid) {
				this.tid = options.tid;
			}
			
			this.jiazai()
		},
		onShow() {
			this.getCouponList()
		},

		methods: {
			jisuan(){
				return new Promise((resolve,reject)=>{
					this.$u.post('/project/details', {
						id: this.id,
						technician_id: this.tid
					}).then(res => {
						let price=res.price;
						let needPrice='';
						let coupondMoney=this.coupondMoney;
						this.form.need_price=price-coupondMoney;
						resolve(res)
					}).catch(err => {
						
					})
					
				})
				
			},
			Coupon(item){
				this.$nextTick(()=>{
					this.coupondMoney=item.money;
					this.form.coupon_id=item.id;
					
					this.jisuan()
					this.CouponShow=false
				})
			},
			useCoupon(){
				
				if(!this.couponList.length){
					uni.navigateTo({
						url:"../coupon/index"
					})
					return
				}
				
				this.CouponShow=true;
				
			},
			getCouponList(){
				this.$u.post('/order/getCoupon', {
					project_id:	this.id 
				}).then(res => {
				  this.couponList=res;
				}).catch(err => {})
			},
			selectTime(e) {
				this.form.appointment_start_time = e.date;
				this.timeShow = false;
			},
			openTime() {
				uni.showLoading()
				this.$u.post('/order/getTime', {
					technician_id: this.tid
				}).then(res => {
					this.timeShow = true;
					this.timeInfo = res;
					uni.hideLoading()
				}).catch(err => {})

			},
			openMap(e) {
				uni.chooseLocation({
					success: (res => {
						this.form.address = res.address;
						this.form.detailAddress = res.name;
						this.form.lat = res.latitude
						this.form.lng = res.longitude;
						this.car(res.latitude, res.longitude)
					})
				});

			},

			car(lat, lng) {
				let to = lat + ',' + lng;
				this.$u.post('/order/getFare', {
					technician_id: this.tid,
					to: to,
				}).then(res => {
					this.form.fare = res.money
				}).catch(err => {})
			},


			pay() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.form.project_id = this.id;
						this.form.technician_id = this.tid;
						this.form.address=this.form.address+this.form.detailAddress;
						this.$u.post('/order/add',
							this.form
						).then(res => {
							this.submitOrder(res.trade_no)
						}).catch(err => {})
					} else {
						console.log('验证失败');
					}
				});
			},
			submitOrder(trade_no) {
				this.$u.post('/pay/submitOrder', {
                    trade_no:trade_no
				}).then(res => {
					const wx=new wxpay(res);
					// #ifdef MP-WEIXIN
						wx.pay().then(res=>{
							   uni.switchTab({
									url:"/pages/book/index"
							   })
						}).catch(err=>{
							uni.navigateBack({
								
							})
						})
					// #endif
					// #ifdef H5
					    wx.h5pay().then(res=>{
							console.log(res,777)
					    	   uni.switchTab({
					    			url:"/pages/book/index"
					    	   })
					    }).catch(err=>{
					    	uni.navigateBack({
					    		
					    	})
					    })
					// #endif
					
				}).catch(err => {})
			},



			jiazai() {
				this.$u.post('/project/details', {
					id: this.id,
					technician_id: this.tid
				}).then(res => {
					let images = res.images.split(',');
					let arr = [];
					images.forEach(item => {
						arr.push(this.$Url(item))
					})
					this.info = res;
					this.info.images = arr;
					this.form.need_price = res.price;

				}).catch(err => {})
			}
		}
	}
</script>

<style>
	.page {
		background: #F1F1F1;
		display: inline-block;
		width: 750rpx;
		min-height: 100vh;
		padding-bottom: 100rpx;

	}

	.u-cell {
		padding: 20rpx 0 !important;
	}


	.bottomBtn {
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		border-bottom: 1rpx solid #F1F1F1;
		display: flex;
		height: 100rpx;
		justify-content: space-between;
		line-height: 100rpx;
		z-index: 99;
	}
</style>
